<template>
	<view class="container">
		<view style="height: 10px;"></view>
		<view class="list">
			<view name="右上角图标" style="width:100%;text-align: right;height:30px;">
				<view style="width:30px;float: right;margin-right: 10px;"><u-icon name="setting" :size="25" @click="toPage('/pages/me/setting')"></u-icon></view>
				<view style="width:30px;float: right;"><u-icon name="scan" :size="25"></u-icon></view>
			</view>
			<!-- 个人信息 -->
			<view class="profile" style="height:auto;margin:20px 10px 0px 10px;">
				<view>
					<view style="width:70px;text-align: center;float: left;height:70px;">
						<!--<u-image width="58px" height="58px" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u-image>-->
						<u-avatar size="58" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
					</view>
					<view style="text-align: left;float: left;height:70px;">
						<view style="height:10px;"></view>
						<u-icon name="level" :size="14" :top="3" color="#409EFF" :label="profile.nickName" :labelSize="18" labelColor="#606266"></u-icon>
						<view style="margin-top:10px;">
							<view v-show="location.city == null">
								<u-icon @click="getGeo" name="map" labelColor="#909399" :size="12" :top="0" color="#409EFF" label="重新定位" :labelSize="12"></u-icon>
							</view>
							<view v-show="location.city != null">
								<u-icon name="map" :size="12" :top="0" color="#409EFF" :label="location.city" :labelSize="12" labelColor="#909399"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 关注，粉丝数，评论，积分 -->
			<view style="clear: both;height:20px;"></view>
			<view style="width:100%;background-color: #FFF;border-radius: 5px;padding-top: 20px;padding-bottom: 20px;">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem, listIndex) in icons" :key="listIndex" @click="iconClicked"  >
						<view style="text-align: center;" >
							<view :style="{ marginTop: listItem.marginTop + 'px' }"></view>
							<template v-if="listItem.id == 'message'">
								<u-badge :absolute="true" :offset="[10,20]" max="99" :value="listItem.count"></u-badge>
								<u-icon :customStyle="{ margin: '0px auto' }" :name="listItem.name" :size="28"></u-icon>
							</template>
							<template v-else>
								<u-icon :customStyle="{ margin: '0px auto' }" :name="listItem.name" :size="28"></u-icon>
							</template>
							<view style="height:5px;"></view>
							<u-text align="center" :size="10" class="grid-text" :text="listItem.title"></u-text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<!-- 菜单列表 -->
			<view style="height:20px;"></view>
			<u-cell-group :customStyle="{ 'background-color': '#fff', 'border-radius': '5px' }">
				<u-cell
					:clickable="true"
					v-for="(listItem, listIndex) in menus"
					:url="listItem.url"
					:key="listIndex"
					:icon="listItem.icon"
					:title="listItem.title"
					:value="listItem.value"
				></u-cell>
			</u-cell-group>
		</view>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
import { SexOpts, DefaultHead, Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
import { User } from '@/utils/user.js';
export default {
	data() {
		return {
			profile: {
				nickName: ''
			},
			location: {
				lat: null,
				lng: null,
				city: null,
				addr: null
			},
			shop: null,
			icons: [
				{ id: 'follow', name: IMG_SERVER + '/images/gz.png', title: '关注', marginTop: 0 , url:'' },
				{ id: 'fans', name: IMG_SERVER + '/images/fs.png', title: '粉丝', marginTop: 0 , url:''},
				{ id: 'viewRecord', name: IMG_SERVER + '/images/ls.png', title: '浏览记录', marginTop: 0 , url:''},
				{ id: 'integral', name: IMG_SERVER + '/images/jf.png', title: '积分', marginTop: 0 , url:''},
				{ id: 'comment', name: IMG_SERVER + '/images/pl.png', title: '评论', marginTop: 20 , url:''},
				{ id: 'message', name: IMG_SERVER + '/images/xx.png', title: '消息', marginTop: 20, url: '/pages/message/list/index?isOpen=No', count: 0 }
			],
			menus: []
		};
	},
	onLoad() {},
	onShow() {
		let _ = this;
		_.loadProfile();
		let geo = User.getLocation();
		if (geo != null) {
			_.location = geo;
		}
		_.menus = _.defaultMenus();
		User.hasOpenShop().then(res => {
			console.log('是否开店？？？', res);
			if (res != null && res.status != null && res.status != 'Saving') {
				_.shop = res;
				_.menus.unshift({ title: '店铺信息', icon: IMG_SERVER + '/images/shop.png', value: '', url: '/pages/shop/info/index' });
			} else {
				//未开店
				_.menus.unshift({ title: '申请开店', icon: IMG_SERVER + '/images/shop.png', value: '', url: '/pages/shop/applyOpen/index' });
			}
		});
		
		//加载未读短信数量
		_.messageCount();
		
	},
	methods: {
		//默认菜单
		defaultMenus() {
			return [];
		},
		//加载资料
		loadProfile() {
			let _ = this;
			User.getProfile().then(res => {
				_.profile = res;
			});
		},
		//定位
		getGeo() {
			let _ = this;
			User.location()
				.then(res => {
					_.location = res;
				})
				.catch(res => {
					Toast.error('位置获取失败');
				});
		},
		//页面跳转
		toPage(page) {
			uni.navigateTo({
				url: page
			});
		},
		//获取未读短信数量
		messageCount(){
			let _ = this;
			Request.get('/api/message/count',{isDelete:'No','isOpen':'No'}).then((res)=>{
				  _.icons.forEach((item,idx,arr)=>{
						 if(item.id == 'message'){
							 item.count = res;
						 }
					})
			})
		},
		//顶部图标点击事件
		iconClicked(idx){
			let url = this.icons[idx].url;
			console.log(url);
			this.toPage(url);
		},
		
	}
};
</script>

<style>
.container {
	background-color: rgb(248, 248, 248);
	width: 100%;
	height: 100%;
}
.list {
	height: auto;
	margin: 0px 10px 50px 10px;
}
</style>
